<template>
  <view class="add-word-content">
<!--    筛选tab-->
    <view class="add-word-tab">
      <scroll-view class="uni-swiper-tab" scroll-x @scroll="scroll">
        <view class="scrollx_items" v-for="(item,index) in wordList" :key="item.id" >
          <view style="display: flex;flex-direction: column;align-items: center;">
            <view v-if="index===0" class="menu_text" :class="[item.id===wordListVal?'menu_text_click':'menu_text_no_click']" @click="ClickGDMenus(item,index)">
              <view class="menu_text-t">{{ item.name }}</view>
              <image :src="`https://td.lszbg.com/public/uploads/h5/home/buttom.png`" ></image>
            </view>
            <view v-else-if="item.name=='智能排序'" class="menu_text" :class="[item.id===wordListVal?'menu_text_click':'menu_text_no_click']">
              <u-collapse class="coll_lapse"  ref="collapse" :head-style="{height: '48rpx'}">
                <u-collapse-item  :show-animation="true" :title="item.selectVal" name="1" class="coll_lapse_item"  :open="item.isShow" @change="collChange(item, index)">
                  <view class="u-collapse-body" v-for="(item2) in item.label" :key="item2.id" @click="selectFun(item, item2, index)">{{ item2.name }}</view>
                </u-collapse-item>
              </u-collapse>
            </view>
            <view v-else class="menu_text"  :class="[item.id===wordListVal?'menu_text_click':'menu_text_no_click']" @click="ClickGDMenus(item,index)">{{ item.name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

<!--    只看可抢-->
<!--    <view @tap="shopHaveOrder"
          style="display: flex;align-items: center;justify-content: center;flex-direction: column">
      <view :class="'buttonBg ' + (switchSee !== true?'buttonUn':'')">
        <text class="buttonOn"></text>
      </view>
      <text style="font-size: 18rpx;margin-top: 10rpx">只看可抢</text>
    </view>-->
    <view class="add-word-tab-only" @click="clickOnly" :value="wordListVal ? 1 : 0">
      <view :class="'buttonBg ' + (switchSee !== true?'buttonUn':'')">
        <text class="buttonOn"></text>
<!--        <u-switch v-model="switchSee" size="24" inactiveColor="rgb(214, 214, 214)"></u-switch>-->
      </view>
      <view class="add-word-tab-only-text">只看可抢</view>
    </view>
    <!--筛选弹窗-->
    <u-popup mode="bottom" v-model="popShow">
      <view class="content">
        <scroll-view scroll-y="true" style="height: 600rpx;">
          <view class="add-word-form" >
            <view v-for="(item,index) in FenLeiList" :key="index" class="add-word-form-item">
              <view class="add-word-form-title">{{ item.title }}</view>
              <view class="add-word-form-content">
                <view class="add-word-form-content-item" v-for="(item2,index2) in item.label" :key="index2">
                  <button @click="ClickBtnMenus(item,item2,index)" class="mini-btn"
                          :class="{'active':item2.id === 1}" size="mini">
                    {{ item2.title }}
                  </button>
                </view>
              </view>
            </view>
            <view class="add-word-form-item">
              <view class="add-word-form-title">平台账号</view>
              <view class="add-word-form-content" style="margin-top: 20rpx;">
                <view class="platfore_box">
                  <view v-for="(item,index) in acctNo.slice(0,4)" :key="index" @click="itemClickFun(item, index)" class="platfore_box_item">
                    <button class="mini-btn" :class="isChange === index ? 'active' : ''" size="mini">{{item.title}}</button>
                    <text v-if="item.platform == '小红书'">小红书</text>
                    <image v-if="item.platform == '小红书'" class="btn-img1" :src="`https://td.lszbg.com/public/uploads/h5/home/form-btn-img.png`"></image>
                    <text v-if="item.platform == '大众点评'">大众点评</text>
                    <image v-if="item.platform == '大众点评'" class="btn-img2" :src="`https://td.lszbg.com/public/uploads/h5/home/form-btn-img2.png`"></image>
                  </view>
                </view>
                <view class="platfore_box">
                  <view v-for="(item,index) in acctNo.slice(4,8)" :key="index" @click="itemClickFun(item, index+4)" class="platfore_box_item">
                    <button class="mini-btn" :class="isChange === index+4 ? 'active' : ''" size="mini" style="padding: 8rpx 20rpx;">{{item.title}}</button>
                    <text v-if="item.platform == '小红书'">小红书</text>
                    <image v-if="item.platform == '小红书'" class="btn-img1" :src="`https://td.lszbg.com/public/uploads/h5/home/form-btn-img.png`"></image>
                    <text v-if="item.platform == '大众点评'">大众点评</text>
                    <image v-if="item.platform == '大众点评'" class="btn-img2" :src="`https://td.lszbg.com/public/uploads/h5/home/form-btn-img2.png`"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="form-btn">
          <button @click="resetFun" class="submit-btn form-btn-reset">重置</button>
          <button @click="submitFun" class="submit-btn form-btn-sumbit">确认</button>
        </view>
        <!--底部tabbar的高度-->
        <view :style="{height: tabberHeight + 'px' }"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "add-word",
  props: {
    /*pVal: {
      type: Boolean,
      default: false
    },*/
    selectObj:{ // 筛选tab默认值
      type: Object,
      default: {}
    },
    switchVal: {
      type: Boolean,
      default: false
    },
    tabberHeight: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      wordList: [ // 筛选tab数据
        {
          name: '筛选',
          id: 1,
          selectVal: '',
          value: '',
          isShow: false,
          label: [],
        },
        {
          name: '智能排序',
          id: 2,
          selectVal: '智能排序',
          value: '',
          isShow: false,
          label: [
            {
              name: '距离优先',
              id: 11,
              pid: 2,
              value: 1,
              select: true
            },
            {
              name: '销量优先',
              id: 12,
              pid: 2,
              value: 7,
              select: false
            },
            {
              name: '返利优先',
              id: 13,
              pid: 2,
              value: 4,
              select: false
            },
            {
              name: '低价优先',
              id: 14,
              pid: 2,
              value: 2,
              select: false
            },
          ]
        },
        {
          name: '单人餐',
          id: 3,
          selectVal: '',
          value: '',
          diners_num: 1,
          isShow: false,
          label: [],
        },
        {
          name: '多人餐',
          id: 4,
          selectVal: '',
          value: '',
          diners_num: 2,
          isShow: false,
          label: [],
        },
        {
          name: '近期上新',
          id: 5,
          selectVal: '',
          value: 6,
          isShow: false,
          label: [],
        },
        {
          name: '达人高返',
          id: 6,
          selectVal: '',
          value: 4,
          isShow: false,
          label: [],
        },
        {
          name: '无门槛',
          id: 7,
          selectVal: '',
          value: '',
          noRequire: 1,
          isShow: false,
          label: [],
        },
      ],
      wordListVal: 0, // 筛选tab默认值
      switchSee: false, //只看可抢val
      value: 'collName',
      isShow: false,
      popShow: false, // 筛选弹出框
      popupVal: 0, // 筛选弹出框默认值
      FenLeiList:[], // 筛选弹窗数据
      FenLeiChange: null,//筛选弹窗数据选中值
      // 筛选-平台账号数据
      acctNo: [
        {id: 1, title: '粉丝0-100', min_fans_num: 0, max_fans_num: 100, min_level: 0, max_level: 0, platform: '小红书', platform_type: '1', isSelected: false},
        {id: 2, title: '粉丝100-300', min_fans_num: 100, max_fans_num: 300, min_level: 0, max_level: 0, platform: '小红书', platform_type: '1', isSelected: false},
        {id: 3, title: '粉丝500-1000', min_fans_num: 500, max_fans_num: 1000, min_level: 0, max_level: 0, platform: '小红书', platform_type: '1', isSelected: false},
        {id: 4, title: '粉丝≥1000', min_fans_num: 1000, max_fans_num: 999999, min_level: 0, max_level: 0, platform: '小红书', platform_type: '1', isSelected: false},
        {id: 5, title: '大众点评v1', min_fans_num: 0, max_fans_num: 0, min_level: 1, max_level: 0, platform: '大众点评', platform_type: '2', isSelected: false},
        {id: 6, title: '大众v1-v3', min_fans_num: 0, max_fans_num: 0, min_level: 1, max_level: 3, platform: '大众点评', platform_type: '2', isSelected: false},
        {id: 7, title: '大众v3-v5', min_fans_num: 0, max_fans_num: 0, min_level:3, max_level: 5, platform: '大众点评', platform_type: '2', isSelected: false},
        {id: 8, title: '大众v5-v8', min_fans_num: 0, max_fans_num: 0, min_level: 5, max_level: 8, platform: '大众点评', platform_type: '2', isSelected: false},
      ],
      isChange: null,//平台确认选中
      acctNoActive: '',//平台前台选中数据
      backendData: [],//后台筛选数据
    };
  },
  onLoad() {

  },
  onReady() {
    let that = this
    that.$api.getShopFilter({}).then(res => {
      that.FenLeiList = res.data.result
      // console.log(" 11111111111111111111",  that.FenLeiList)
      that.FenLeiList.forEach((item, index) => {
        item.label.forEach((item2, index2) => {
          item2.id = 0
        })
      })
      that.FenLeiList[0].label[0].isActive = true
      console.log(" this.filterData[0].label[0].isActive",  that.FenLeiList)
    })
  },
  methods:{
    scroll(){},
    // 筛选tab选中事件
    ClickGDMenus(item, index) {
      // 关闭所有下拉菜单
      this.wordList.forEach((item) => {
        item.isShow = false;
      })
      // 判断是否筛选弹窗
      if(index === 0){
        this.popShow = !this.popShow
        this.isShow = false; //智能排序下拉关闭
        this.wordListVal = item.id //tab选中状态
        this.switchSee = false //只看可抢取消选中
        this.$emit("ClickFormVal", {itemObj: item, index,wordListVal: this.wordListVal, isSwitchSee: this.switchSee})
      }else {
        console.log('选中的tab=', item)
        this.isShow = false; //智能排序下拉关闭
        let isPop = this.popShow //关闭弹窗
        this.wordListVal = item.id //tab选中状态
        this.switchSee = false //只看可抢取消选中
        this.$emit("ClickwordListVal", {itemObj: item, index, isPop, wordListVal: this.wordListVal, isSwitchSee: this.switchSee})
      }
    },
    // 点击智能排序事件
    collChange(res, i){
      let that = this;
      console.log('下拉事件', res, i)
      that.wordListVal = res.id //tab选中状态
      that.wordList.forEach((item, index) => {
        if (i === index){
          item.isShow = !item.isShow;
        } else {
          item.isShow = false;
        }
      })
      console.log('打开下拉==', that.wordList)
    },
    // 点击下拉选择事件
    selectFun(res, res2, i){
      let that = this;
      console.log('下拉选择事件', res2, i)
      that.wordListVal = res.id //tab选中状态
      that.switchSee = false //只看可抢取消选中
      let switchSeeVal = that.switchSee
      console.log('下拉选择事件', that.isShow)
      that.wordList.forEach((item, index) => {
        if (i === index){
          item.isShow = !item.isShow;
        }
        if (item.label.length>0){
          item.label.forEach((item2, index2) => {
            item2.select = item2.id === res2.id;
            if (item2.select){
              item.selectVal = item2.name;
            }
          })
        }
      })
      this.$emit("selectFun", {itemObj: res2, wordListVal: that.wordListVal, switchSeeVal})
    },
    // 筛选弹窗事件
    ClickBtnMenus(clickItem1,clickItem,clickIndex) {
      let that = this
      console.log("点击了分类", clickItem1)
      // item.isActive = true

      const oldData = that.FenLeiList
      oldData.forEach((item, index) => {
        item.label.forEach((item2, index2) => {
          if(clickIndex === index){
            item2.id = 0
          }
        })
      })
      oldData.forEach((item, index) => {
        item.label.forEach((item2, index2) => {
          if(clickItem.title === item2.title){
            item2.id = 1
          }
        })
      })
      this.$nextTick(() => {
        that.FenLeiList = oldData
      })
      // console.log("FenLeiList", that.FenLeiList)

    },
    //   点击平台账号获取值
    itemClickFun(res,index){
      // this.isChange = Number(index + 1)
      console.log("点击了平台账号", index, res)
      if(this.isChange === index){
        this.isChange = null
      }else{
        this.isChange = index
      }
      this.acctNoActive = res
    },
    // 只看可抢的
    clickOnly(){

      // 其他选项取消选中状态
      this.wordListVal = 0
      let wordVal = this.wordListVal

      // switch的值取反
      this.switchSee = !this.switchSee
      let switchSeeVal = this.switchSee
      console.log('只看可抢', switchSeeVal)
      this.$emit("clickOnly", {switchSeeVal, wordVal})
    },
    // 提交事件
    submitFun(){
      this.popShow = false // 筛选弹出框关闭
      let that = this
      // 点击提交时先清空本地数据缓存
      that.backendData = []
      // 后台选中数据
      that.FenLeiList.forEach((item, index) => {
        item.label.forEach((item2, index2) => {
          if (item2.id === 1){
            if(item2.pid === 1){
              that.backendData.push({"name":item.param_name,"value":item2.value})
            }else if(item2.pid === 2){
              that.backendData.push({"name":item.param_name,"value":item2.value})
            }
          }
        })
      })
      //前台平台账号选中数据
      let acctNoVal = {
        name: "platform_type",
        label: {
          min_fans_num: that.acctNoActive.min_fans_num,
          max_fans_num: that.acctNoActive.max_fans_num,
          min_level: that.acctNoActive.min_level,
          max_level: that.acctNoActive.max_level,
          platform_type: that.acctNoActive.platform_type,
        }
      }
      // 组装前后台数据
      this.$emit("submitData", that.backendData.concat(acctNoVal))
      // 重置选中状态
      that.FenLeiList.forEach((item, index) => {
        item.label.forEach((item2, index2) => {
          item2.id = 0
        })
      })
      this.isChange = null
      console.log("选中数据==", that.backendData.concat(acctNoVal))

    },
    // 获取筛选的前四个
    acctNoFour(){
      return this.acctNo.slice(0, 8)
    },
    // 获取筛选的后四个
    acctNoFourLast(){
      return this.acctNo.slice(4, 8)
    },
  //   重置事件
    resetFun(){
      let that = this
      // 重置选中状态
      that.FenLeiList.forEach((item, index) => {
        item.label.forEach((item2, index2) => {
          item2.id = 0
        })
      })
      this.isChange = null
    }
  },
  watch: {
    /*pVal(newVal) {
      this.popShow = newVal
    },*/
    selectObj(newVal) {
      // console.log('selectObj==', newVal)
      this.wordListVal = newVal.selectVal;
      this.wordList.forEach((item, index) => {
        if (item.id === newVal.selectVal){
          item.selectVal = newVal.selectName;
        }
      })
    },
    switchVal(newVal){
      console.log('switchVal==', newVal)
      this.switchSee = newVal
    }
  }
}
</script>

<style lang="scss">

.add-word-content{
  position: relative;
  padding: 4rpx 0 10rpx 10rpx;
  // 筛选 css
  .add-word-tab {
    width: calc(100% - 100rpx);

    .uni-swiper-tab {

      white-space: nowrap;
    }

  }
  .add-word-tab-only{
    width: 120rpx;
    position: absolute;
    right: 0;
    z-index: 2;
    top: 10rpx;
    text-align: center;
    //background: linear-gradient( 90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
    .buttonBg {
      width: 58rpx;
      height: 28rpx;
      border-radius: 40rpx;
      background: linear-gradient(140deg, #FF530E 0%, #FFB05A 100%);
      position: relative;
      display: inline-block;
    }
    .buttonOn {
      position: absolute;
      width: 20rpx;
      height: 20rpx;
      background-color: white;
      border-radius: 40rpx;
      top: 5rpx;
      right: 5rpx;
    }
    .buttonUn {
      background: #D6D6D6;

    }
    .buttonUn .buttonOn {
      left: 5rpx;
    }
    .add-word-tab-only-text{

      text-align: center;
      display: block;
      font-size: 20rpx;
      color: #888888;
    }
  }
  .scrollx_items {
    text-align: left;
    display: inline-block;
    margin-right: 12rpx;
    .menu_text{
      line-height: 48rpx;
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      background: #F6F6F6;
      border-radius: 10rpx;
      position: relative;
      z-index: 11;
      .menu_text-t{
        padding-right: 20rpx;
      }
      image{
        width: 12rpx;
        height: 8rpx;
        position: absolute;
        top: 28rpx;
        right: 16rpx;
      }
      .coll_lapse{
        position: relative;
        z-index: 100;
        width: 100rpx;
        .coll_lapse_item{
          width: 100rpx;
          .u-collapse-body{
            font-size: 24rpx;
            padding: 10rpx 16rpx;
          }

        }
      }

    }
    .menu_text_click {
      color: #FF7900;
      border: 1px solid #FFBB7D;
      background: #FFF7EF;
    }
    .menu_text_no_click{
      color: #666666;
    }
  }
//  筛选弹窗css
  .content{
    border-radius: 30rpx 30rpx 0;
  }
  .add-word-form {
    padding: 20rpx;
    margin-top: 20rpx;
    //position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 120rpx;
    overflow: auto;

    .add-word-form-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #3D3D3D;
      height: 60rpx;
      line-height: 60rpx;
    }

    .add-word-form-content {
      .add-word-form-content-item {
        display: inline-block;
        margin-right: 14rpx;
        position: relative;
        margin-bottom: 20rpx;
        .btn-img1 {
          width: 84rpx;
          height: 38rpx;
          position: absolute;
          top: -16rpx;
          right: 0;
        }

        .btn-img2 {
          width: 96rpx;
          height: 38rpx;
          position: absolute;
          top: -16rpx;
          right: 0;
        }

        text {
          position: absolute;
          top: -18rpx;
          right: 6rpx;
          z-index: 10;
          font-size: 20rpx;
          color: #FFFFFF;
        }
      }

      .mini-btn {
        background-color: #F6F6F6;
        border: none; /* 去掉按钮本身的边框 */
        box-shadow: none;
        padding: 8rpx 18rpx;
      }
      .platfore_box{
        display: flex;
        justify-content: space-between;
        .platfore_box_item{
          position: relative;
          margin-bottom: 30rpx;
          margin-right:10rpx;
          .btn-img1 {
            width: 84rpx;
            height: 38rpx;
            position: absolute;
            top: -16rpx;
            right: 0rpx;
          }
          .btn-img2 {
            width: 96rpx;
            height: 38rpx;
            position: absolute;
            top: -16rpx;
            right: 0rpx;
          }

          text {
            position: absolute;
            top: -18rpx;
            right: 6rpx;
            z-index: 10;
            font-size: 20rpx;
            color: #FFFFFF;
          }
          .mini-btn{
            padding: 6rpx 14rpx;
            background-color: #F6F6F6;
          }

        }
        .platfore_box_item:last-child{
          margin-right:0;
        }
      }
      .active {
        color: #FF7900;
        border: 1px solid #FFBB7D;
        background: #FFF7EF;
      }

      /* 去掉伪元素上的边框 */
      .mini-btn::after {
        border: none;
      }
    }

  }
  .form-btn {
    width: 100%;
    height: 120rpx;
    //position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 如果需要垂直居中 */
    padding: 10rpx 20rpx;
    background: #FFFFFF;

    .submit-btn {
      flex: 1; /* 让按钮等宽 */
      margin: 0 5px; /* 添加一些外边距 */
      border: none;
      border-radius: 50rpx;
    }

    .form-btn-reset {
      background: #FFFFFF;
      border: 2rpx solid #D2D2D2;
    }

    .form-btn-reset:after {
      border: none;
    }

    .form-btn-reset:active {
      background: #F6F6F6;
      border: 2rpx solid #D2D2D2;
    }

    .form-btn-sumbit {
      color: #FFFFFF;
      background: #FFA853;
    }

    .form-btn-sumbit:after {
      border: none;
    }

    .form-btn-sumbit:active {
      color: #FFFFFF;
      background: #FF7900;
    }
  }
}

</style>
